{% extends "base.html" %}

{% block title %}订单详情 #{{ order.order_no }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <h2 class="mb-0"><i class="fas fa-shopping-cart me-2"></i>订单详情</h2>
        <div>
            <a href="{{ url_for('order.list') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
            <div class="btn-group ms-2">
                {% if order.status == 1 %}
                <a href="{{ url_for('order.update_status', order_id=order.order_id, status=2) }}" class="btn btn-success">
                    <i class="fas fa-check me-1"></i>标记为已支付
                </a>
                <a href="{{ url_for('order.update_status', order_id=order.order_id, status=5) }}" class="btn btn-danger">
                    <i class="fas fa-times me-1"></i>取消订单
                </a>
                {% elif order.status == 2 %}
                <a href="{{ url_for('order.update_status', order_id=order.order_id, status=3) }}" class="btn btn-primary">
                    <i class="fas fa-shipping-fast me-1"></i>标记为已发货
                </a>
                <a href="{{ url_for('order.update_status', order_id=order.order_id, status=5) }}" class="btn btn-danger">
                    <i class="fas fa-times me-1"></i>取消订单
                </a>
                {% elif order.status == 3 %}
                <a href="{{ url_for('order.update_status', order_id=order.order_id, status=4) }}" class="btn btn-success">
                    <i class="fas fa-check-double me-1"></i>标记为已完成
                </a>
                <a href="{{ url_for('order.update_status', order_id=order.order_id, status=5) }}" class="btn btn-danger">
                    <i class="fas fa-times me-1"></i>取消订单
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 订单基本信息 -->
    <div class="col-md-6 mb-4">
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>订单信息</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="text-muted">订单编号</h6>
                        <p class="mb-0">{{ order.order_no }}</p>
                    </div>
                    <div class="col-6">
                        <h6 class="text-muted">订单状态</h6>
                        <p class="mb-0">
                            {% if order.status == 1 %}
                            <span class="badge bg-warning text-dark">待支付</span>
                            {% elif order.status == 2 %}
                            <span class="badge bg-info">待发货</span>
                            {% elif order.status == 3 %}
                            <span class="badge bg-primary">已发货</span>
                            {% elif order.status == 4 %}
                            <span class="badge bg-success">已完成</span>
                            {% elif order.status == 5 %}
                            <span class="badge bg-secondary">已取消</span>
                            {% else %}
                            <span class="badge bg-secondary">未知状态</span>
                            {% endif %}
                        </p>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="text-muted">下单时间</h6>
                        <p class="mb-0">{{ order.create_time.strftime('%Y-%m-%d %H:%M:%S') if order.create_time else '未知' }}</p>
                    </div>
                    <div class="col-6">
                        <h6 class="text-muted">更新时间</h6>
                        <p class="mb-0">{{ order.update_time.strftime('%Y-%m-%d %H:%M:%S') if order.update_time else '未知' }}</p>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="text-muted">支付方式</h6>
                        <p class="mb-0">{{ order.payment_method or '未选择' }}</p>
                    </div>
                    <div class="col-6">
                        <h6 class="text-muted">支付时间</h6>
                        <p class="mb-0">{{ order.payment_time.strftime('%Y-%m-%d %H:%M:%S') if order.payment_time else '未支付' }}</p>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-12">
                        <h6 class="text-muted">支付流水号</h6>
                        <p class="mb-0">{{ order.payment_no or '暂无' }}</p>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-muted">备注</h6>
                        <p class="mb-0">{{ order.note or '无备注' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 用户和超市信息 -->
    <div class="col-md-6 mb-4">
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-user me-2"></i>用户和超市信息</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="text-muted">用户名</h6>
                        <p class="mb-0">{{ order.user.username if order.user else '未知用户' }}</p>
                    </div>
                    <div class="col-6">
                        <h6 class="text-muted">用户ID</h6>
                        <p class="mb-0">{{ order.user_id }}</p>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="text-muted">联系电话</h6>
                        <p class="mb-0">{{ order.user.phone if order.user and order.user.phone else '未提供' }}</p>
                    </div>
                    <div class="col-6">
                        <h6 class="text-muted">邮箱</h6>
                        <p class="mb-0">{{ order.user.email if order.user and order.user.email else '未提供' }}</p>
                    </div>
                </div>
                
                <hr class="my-3">
                
                <div class="row mb-3">
                    <div class="col-6">
                        <h6 class="text-muted">超市名称</h6>
                        <p class="mb-0">{{ order.supermarket.name if order.supermarket else '未知超市' }}</p>
                    </div>
                    <div class="col-6">
                        <h6 class="text-muted">超市ID</h6>
                        <p class="mb-0">{{ order.market_id }}</p>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-muted">超市地址</h6>
                        <p class="mb-0">{{ order.supermarket.address if order.supermarket and order.supermarket.address else '未提供' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 订单商品列表 -->
<div class="row">
    <div class="col-12 mb-4">
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-shopping-basket me-2"></i>订单商品</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">盲盒名称</th>
                                <th scope="col">单价</th>
                                <th scope="col">数量</th>
                                <th scope="col">小计</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in order_items %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>
                                    {% if item.blind_box %}
                                    <div class="d-flex align-items-center">
                                        {% if item.blind_box.image_url %}
                                        <img src="{{ item.blind_box.image_url }}" alt="{{ item.blind_box.name }}" class="me-2" style="width: 40px; height: 40px; object-fit: cover;">
                                        {% else %}
                                        <div class="bg-light d-flex justify-content-center align-items-center me-2" style="width: 40px; height: 40px;">
                                            <i class="fas fa-box text-muted"></i>
                                        </div>
                                        {% endif %}
                                        <div>
                                            <div>{{ item.blind_box.name }}</div>
                                            <small class="text-muted">{{ item.blind_box.category }}</small>
                                        </div>
                                    </div>
                                    {% else %}
                                    未知商品
                                    {% endif %}
                                </td>
                                <td>¥{{ "%.2f"|format(item.price) }}</td>
                                <td>{{ item.quantity }}</td>
                                <td>¥{{ "%.2f"|format(item.price * item.quantity) }}</td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="5" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fas fa-box fa-3x mb-3"></i>
                                        <p>暂无商品数据</p>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3"></td>
                                <td><strong>总计：</strong></td>
                                <td><strong class="text-danger">¥{{ "%.2f"|format(order.total_amount) }}</strong></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
